<template>
    <div class="footer">
        <div class="foot flex">
            <router-link to='/' :replace="true" class="flex1 flexv flexc">
                <img v-if="index == 'index'" src="@/assets/hone_page_s.png" alt="">
                <img v-else src="@/assets/home_page_n.png" alt="">
                <p :class="index == 'index' ? 'on' : ''">首页</p>
            </router-link>
            <router-link to='/classify' :replace="true" class="flex1 flexv flexc">
                <img v-if="index == 'classify'" src="@/assets/hone_classification_s.png" alt="">
                <img v-else src="@/assets/hone_classification_n.png" alt="">
                <p :class="index == 'classify' ? 'on' : ''">分类</p>
            </router-link>
            <router-link to='/car' :replace="true" class="flex1 flexv flexc">
                <img v-if="index == 'car'" src="@/assets/hone_shoppingcart_s.png" alt="">
                <img v-else src="@/assets/hone_shoppingcart_n.png" alt="">
                <p :class="index == 'car' ? 'on' : ''">购物车</p>
                <i class="point white tc" v-if="cartNumber > 0">{{cartNumber}}</i>
            </router-link>
            <router-link to='/center' :replace="true" class="flex1 flexv flexc">
                <img v-if="index == 'center'" src="@/assets/hone_my_s.png" alt="">
                <img v-else src="@/assets/hone_my_n.png" alt="">
                <p :class="index == 'center' ? 'on' : ''">我的</p>
            </router-link>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
        }
    },
    props: {
        index: {
            type: String,
            value: 'index'
        },
        cartNumber: {
            type: Number,
            value: 0
        }
    },
}
</script>
<style lang="less" scoped>
.footer{
    width: 100%;
    height: 0.98rem;
    .foot{
        width: 100%;
        max-width: 750px;
        height: 0.98rem;
        margin: 0 auto;
        position: fixed;
        z-index: 100;
        bottom: 0;
        left: 0;
        right: 0;
        font-size: 0.26rem;
        line-height: 120%;
        color: #333;
        box-shadow: 0 0 0.1rem 0 #efefef;
        background-color: #fff;
        a {
            position: relative;
            img{
                max-width: 0.44rem;
                max-height: 0.54rem;
                margin: 0 auto 0;
            }
            p{
                margin-top: 0.06rem;
                line-height: 120%;
                text-align: center;
            }
            .on{
                color: #50AD22;
            }
            .point{
                width: 0.3rem;
                height: 0.3rem;
                position: absolute;
                z-index: 101;
                top: 0.06rem;
                right: 0.48rem;
                border-radius: 100%;
                font-size: 0.2rem;
                line-height: 0.3rem;
                background-color: #50AD22;
            }
        }
    }
}
</style>